<template>
  <div class="indexPage">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
      <ul class="banner-tab">
        <li>
          <img src="../../assets/img/love.png" alt="" />
          <p>签到</p>
        </li>
        <li>
          <img src="../../assets/img/lv.png" alt="" />
          <p>礼券</p>
        </li>
        <li>
          <img src="../../assets/img/wg.png" alt="" />
          <p>砍价</p>
        </li>
        <li>
          <img src="../../assets/img/dp.png" alt="" />
          <p>专栏</p>
        </li>
      </ul>
    </div>
    <cart-title>全民砍价</cart-title>
    <cart-title>精选专题</cart-title>
    <div class="news">
      <ul>
        <li v-for="(item, index) in newList" :key="index">
          <img :src="item.pic" alt="" />
          <h5>{{ item.title }}</h5>
          <p>{{ item.descript }}</p>
        </li>
      </ul>
    </div>
    <cart-title @click="$router.push('/alllist')">人气推荐</cart-title>
    <div class="people">
      <people-cart class="pel_it" v-for="(item,index) in goodsList" :key="index" :itemObj="item"></people-cart>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { getBanner, getNewList,getGoods } from "../../api/home/home";
import cartTitle from "../../components/cartTitle.vue";
import PeopleCart from '../../components/peopleCart.vue';

export default {
  components: { cartTitle, PeopleCart },
  setup() {
    // axios.get('https://api.it120.cc/small4/banner/list',{params:{id:3}})
    const data = reactive({
      bannerList: [], // 轮播图的数据
      newList: [], // 文章列表的数据
      goodsList: [], // 人气推荐的数据
    });
    getBanner().then((res) => {
      data.bannerList = res.data;
    });
    getNewList().then((res) => {
      // 文章列表的请求
      data.newList = res.data;
    });
    getGoods().then(res => { // 商品列表的请求接口
       data.goodsList = res.data.splice(9,4); // 从28条数据里面取出 4 条数据
    })
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.indexPage {
  // height: 100%;
  .my-swipe {
    img {
      width: 100%;
    }
  }
  .banner {
    position: relative;
    .banner-tab {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      display: flex;
      z-index: 1;
      height: 100px;
      background: #fff;
      border-radius: 20% 20% 0 0;
      box-sizing: border-box;
      padding: 10px 0;
      li {
        width: 25%;
        text-align: center;
        font-size: 15px;
        img {
          height: 40px;
          width: 40px;
          margin-bottom: 20px;
        }
      }
    }
  }
  .news {
    width: 100%;
    overflow-x: auto;
    ul {
      display: flex;
      width: calc(330 * 5px);
      background: #fff;
      li {
        margin-left: 10px;
        width: 320px;
        font-size: 15px;
        h5 {
          margin: 10px 0 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p {
          color: #a8a8a8;
          font-size: 13px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 10px;
        }
        img {
          width: 100%;
          border-radius: 5px;
          height: 205px;
        }
      }
    }
  }
  .people{
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    justify-content: space-between;
    background: #fff;
    .pel_it{
      width: 48%;
    }
  }
}
</style>